<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.js"></script>
    <script>
window.onload=function(){
        // 1.定义组件
        let user = {
        // 接受参数
        template:`
            <div>{{$route.params}}</div>
        `
    }
    let manager = {
        template:`
            <div>{{$route.params.id}}</div>
        `
    }
    // 2.创建路由实例对象
    let router = new VueRouter({
        routes:[{
            // 动态路径参数使用:开头
            path:'/user/:id',
            component:user
        },{
            path:'/manager/:id',
            component:manager
        }]
    })
    new Vue({
        el:"#app",
        // 将路由实例对象导入vue实例
        router   //相当于router:router,在此使用简写形式
    })



}
    </script>
</head>
<body>
    <div id="app">
        <router-link to="/user/1">user1</router-link>
        <router-link to="/manager/2">user2</router-link>
        <router-view></router-view>


    </div>

</body>
</html>